<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <link href="public/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="public/xw/css/xcConfirm.css" rel="stylesheet" type="text/css" />
    <script src="public/JQuery.1.11.3.js"></script>
    <script src="public/bootstrap/dist/js/bootstrap.js"></script>
    <script src="public/tool/jquery.placeholder.js"></script>
    <script src="public/tool/jquery.color.js"></script>
    <script src="public/xw/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>

    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<script type="text/javascript">
    $(function () {
        // Invoke the plugin
        $('input, textarea').placeholder();
    });
</script>

<style type="text/css">
    .sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}
    .xcConfirm .popBox .ttBox{
        height:50px;
    }
</style>

<?php
include_once 'class/MMysql.php';
//按城市搜索

if(isset($_REQUEST['city_name'])){
    $city_name=$_REQUEST['city_name'];
    $city_id="-1";
    if(empty($city_name)){
        $city_name="-1";
    }
    if($city_name!="-1"){
        $mysql = new MMysql();
        $city_name="'".$city_name."'";
        $res = $mysql
            ->where(array('city_ch_name'=>$city_name))
            ->select('city');

        if(count($res)>0){

            $city_name= $res[0]['city_ch_name'];
            $city_id = $res[0]['city_id'];
        }
        else{
            $city_name='-1';
            $city_id='-1';
        }
    }
//    echo $city_name;
//    echo $city_id;
}

?>

<body>
<!--引入导航条-->
<?php
include 'base/home_header.php';
?>
<style>
    .top-menu a{
        color:#2b2b2b;
    }
    .second_menu{
        background: whitesmoke;
    }
    .dingzhi{
        position: relative;
        top:80px;
        height:121px;
        background-color: rgb(202,202,202);
        display: block;
        padding-top: 25px;
        float: left;
    }
    .dingzhi .span1{
        padding-left: 121px;
        font-size: 20px;
        color: #262626;
        line-height: 35px;
        display: inline-block;;
    }
    .dingzhi .span2{
        font-size: 14px;
    }
    .bg-color-black{
        background-color: #2B2B2B;
    }
    .dingzhi button{
        width: 140px;
        color: white;
        text-align: center;
    }
    .slide{
        /*background-image: rgb('');*/
        background-color: yellow;
        height: 136px;
        width: 81px;
        /*margin-top: 100px;*/
        float: left;;
    }
    .select{
        text-align: center;
        width: 33%;
        /*min-width: 590px;*/
        float: left;
        border-right: 1px solid whitesmoke;
        margin-top: 30px;
        font-size: 16px;
        color: #333743;
        letter-spacing: 0px;
    }
    .selectnot{
        border-right: 0px solid black;
    }
    .properties{
        position: relative;
        top:30px;
        /*background-color: red;*/
    }
    .margin_left{
        margin-left: 2%;
        margin-right: 2%;
    }
    .margin_left img{
        width: 100%;
        height: 90%;
    }
    button{
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .selectcitychild{
        position: absolute;
        background:whitesmoke;
        height: 200px;width: 268px;top:85px;
        left: 5%;overflow :auto;display: none;
        z-index: 4;
    }

    .cityselect{
        list-style-type:none;
    }
    .cityselect li{
        margin-top: 12px;
        font-size: 20px;
        cursor: pointer;
    }
    .cityselect li:hover{
        /*background: green;*/
    }


    .pricechild{
        position: absolute;
        background:whitesmoke;
        height: 85px;width: 33%;top:85px;
        left: 66%;
        display: none;
        z-index: 4;
    }

    .selectpropertychild{
        position: absolute;
        background:whitesmoke;
        height: 140px;
        width: 30%;
        top:85px;
        left: 34.5%;
        display: none;
        z-index: 4;
    }

    .propertyselect{
        list-style-type:none;
    }
    .propertyselect li div{
        margin-top: 12px;
        margin-right: 40px;
        font-size: 20px;
        cursor: pointer;
        text-align: center;
    }


    .propertysinfo{
        margin: 0 auto;
        width: 1180px;
        height: 300px;
        margin-top: 30px;
        position: relative;
        top:133px;;
    }

    .propertyinfo{
        width: 31%;height: 382px;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
        margin-top: 20px;
    }
    .bg-color-black{
        background: #4CB7C2;
    }
</style>


<div style="position:relative;top: 133px;margin: 0 auto; border-bottom: 1px solid whitesmoke;height: 85px;width:1180px;color: #9b9b9b;">

    <div class="select">
        <?php
        if($city_id=="-1"){
            echo '  <span data-value="-1" class="selectcityparents" style=" cursor: pointer;" onmouseover="showcity()">
                 选择城市
                 </span>';
        }
        else{
            echo '<span data-value="'.$city_id.'" class="selectcityparents" style=" cursor: pointer;" onmouseover="showcity()">'.
                 $city_name.
                 '</span>';
        }
        ?>

    </div>
    <div  class="selectcitychild" onmouseleave="hidecity()">
        <ul class="cityselect">
            <?php
            $mysql = new MMysql();
            $res = $mysql
                ->select('city');
            for($i=0;$i<count($res);$i++){
                echo ' <li>
                    <div style="float: left;">
                        <span data-value="'.$res[$i]['city_id'].'">'.$res[$i]['city_ch_name'].'</span>
                    </div>
    
                    <div style="clear: both;">
   
                    </div>
                </li>';
            }
            ?>
        </ul>
    </div>

    <div class="select">
        <span data-value="-1" class="selectpropertyparents" style=" cursor: pointer;" onmouseover="showproperty()">
            房产种类
        </span>
    </div>
    <div  class="selectpropertychild" onmouseleave="hideproperty()">
        <ul class="propertyselect">
            <li>
                <div>
                    <span data-value="0">农场</span>
                </div>

            </li>
            <li>
                <div>
                    <span data-value="1">公寓</span>
                </div>

            </li>
            <li>
                <div>
                    <span data-value="2">梦幻别墅</span>
                </div>
                
            </li>
            <li></li>
        </ul>
    </div>


    <div class="select selectnot">
        <span style=" cursor: pointer;" onmouseover="showprice()">
           价格范围
        </span>
    </div>
    <div  class="pricechild" onmouseleave="hideprice()">
        <div class="form-inline" style="margin-left: 30px;margin-top: 10px;" role="form">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">￥</span>
                    <input id="low" type="text" class="form-control" placeholder="最低价格">
                    <span class="input-group-addon">万元</span>
                </div>
            </div>
            -
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">￥</span>
                    <input id="high" type="text" class="form-control" placeholder="最高价格">
                    <span class="input-group-addon">万元</span>
                </div>
            </div>
            <button id="btnprice" style="background: #d8d8d8; color: #9297A3;">确认</button>
        </div>
    </div>
</div>


<div class="propertysinfo">

<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="propertyinfo">-->
<!--        <img src="public/image/3.jpg" style="width: 100%;height: 90%;background-size: 100% 100%;">-->
<!--        <span style="display: block;font-size: 16px;color: #333743;">-->
<!--            房产名字-->
<!--        </span>-->
<!--         <span style="display:block;font-size: 11px;color: #9297A3;">-->
<!--            代理商名字-->
<!--        </span>-->
<!--    </div>-->

</div>
<div style="clear: both;">

</div>
<div style="position: relative;top: 100px;;margin-top: 40px;text-align: center;color: white;">

    <div class="spinner" style="display: none;">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
    <button id="loadmore" class="bg-color-black" ">
        加载更多
    </button>
</div>

<div style="height: 100px;">

</div>

</body>
</html>
<?php
include 'base/js.php';
?>
<script>
    $(document).ready(function(){

        $(window).scroll(function() {

            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            if(scrollTop>=200){
                $(".header-menu").css('background','whitesmoke');
            }
            else {
                $(".header-menu").css('background','none');
            }
        });

        //点击切换城市
        $(".selectcitychild ul li").click(function () {
            $('.selectcityparents').html($(this).children().children().html());
            $('.selectcityparents').attr('data-value',$(this).children().children().attr('data-value'));
            $(".selectcitychild").fadeOut("slow");

            loadpropertybycityOrtypeOrprice();
        });

        //点击切换类型
        $(".selectpropertychild ul li").click(function () {
            $('.selectpropertyparents').html($(this).children().children().html());
            $('.selectpropertyparents').attr('data-value',$(this).children().children().attr('data-value'));
            $(".selectpropertychild").fadeOut("slow");
            loadpropertybycityOrtypeOrprice();
        });

        //第一次进来,按城市搜索
        loadpropertybysearch();

        function loadpropertybysearch() {
            //发送房产请求
            var city_id = $('.selectcityparents').attr('data-value');
            var low=$("#low").val().trim()==""?'-1':$("#low").val().trim();
            var high=$("#high").val().trim()==""?'-1':$("#high").val().trim();
            var type=$('.selectpropertyparents').attr('data-value');
            $.ajax( {
                url: 'class/property/search_property.php',
                data:{
                    method:'search',
                    city_id : city_id,
                    low : low,
                    high : high,
                    type : type
                },
                type:'get',
                success:function(data) {
                    $(".spinner").css('display','none');
                    $("#loadmore").css('display','inline-block');
                    var html="";
                    var jsonObj=eval("("+data+")");

                    if(jsonObj.length>0){
                        for(var i=0;i<jsonObj.length;i++){
//                        console.log(jsonObj[i]);
                            html+=' <a href="property_detail.php?property_id='+jsonObj[i]['property_id']+'"><div class="propertyinfo" property_id="'+jsonObj[i]['property_id']+'">'+
                                '<img src="'+jsonObj[i]['property_img']+'" style="width: 100%;height: 90%;background-size: 100% 100%;">'+
                                '<div style="float: left;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                                jsonObj[i]['property_name']+
                                '</span>'+
                                '</div>'+

                                '<div style="float: right;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                                jsonObj[i]['property_rmb']+
                                '</span>'+
                                '</div>'+
                                '<div style="clear:both;">'+

                                '</div>'+
                                '<div>'+
                                '<span style="display:block;font-size: 11px;color: #9297A3;">'+
                                jsonObj[i]['agent']+
                                '</span>'+
                                '</div>'+
                                '</div></a>';
                        }
                    }
                    else{
                        if(jsonObj.length==0){
                            html+='<div class="no_search" style="background:whitesmoke;height: 200px;display: block;position: relative;text-align: center;padding-top: 50px;">'+
                                '<img src="public/image/group.png">'+
                                '<span>'+
                                '搜索不到其他的,再试试其他的?'+
                                '</span>'+
                                '</div>';
                            $("#loadmore").css('display','none');
                        }
                    }

                    $(".propertysinfo").empty().append(html);
                },
                beforeSend: function(){
                    //加载动画
                    $(".spinner").css('display','block');
                    $("#loadmore").css('display','none');
                },
                error : function() {
                    // view("异常！");
                    //window.wxc.xcConfirm('add fail', window.wxc.xcConfirm.typeEnum.error);
                }
            });
        }

        //按条件搜索
        function loadpropertybycityOrtypeOrprice() {
            //发送房产请求
            var city_id = $('.selectcityparents').attr('data-value');
            var low=$("#low").val().trim()==""?'-1':$("#low").val().trim();
            var high=$("#high").val().trim()==""?'-1':$("#high").val().trim();
            var type=$('.selectpropertyparents').attr('data-value');
            $.ajax( {
                url: 'class/property/search_property.php',
                data:{
                    method:'cityOrtypeOrprice',
                    city_id : city_id,
                    low : low,
                    high : high,
                    type : type
                },
                type:'get',
                success:function(data) {
                    $(".spinner").css('display','none');
                    $("#loadmore").css('display','inline-block');
                    var html="";
                    var jsonObj=eval("("+data+")");

                    if(jsonObj.length>0){
                        for(var i=0;i<jsonObj.length;i++){
//                        console.log(jsonObj[i]);
                            html+=' <a href="property_detail.php?property_id='+jsonObj[i]['property_id']+'"><div class="propertyinfo" property_id="'+jsonObj[i]['property_id']+'">'+
                                '<img src="'+jsonObj[i]['property_img']+'" style="width: 100%;height: 90%;background-size: 100% 100%;">'+
                                '<div style="float: left;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                                jsonObj[i]['property_name']+
                                '</span>'+
                                '</div>'+

                                '<div style="float: right;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                                jsonObj[i]['property_rmb']+
                                '</span>'+
                                '</div>'+
                                '<div style="clear:both;">'+

                                '</div>'+
                                '<div>'+
                                '<span style="display:block;font-size: 11px;color: #9297A3;">'+
                                jsonObj[i]['agent']+
                                '</span>'+
                                '</div>'+
                                '</div></a>';
                        }
                    }
                    else{
                        if(jsonObj.length==0){
                            html+='<div class="no_search" style="background:whitesmoke;height: 200px;display: block;position: relative;text-align: center;padding-top: 50px;">'+
                                '<img src="public/image/group.png">'+
                                '<span>'+
                                '搜索不到其他的,再试试其他的?'+
                                '</span>'+
                                '</div>';
                            $("#loadmore").css('display','none');
                        }
                    }

                    $(".propertysinfo").empty().append(html);
                },
                beforeSend: function(){
                    //加载动画
                    $(".spinner").css('display','block');
                    $("#loadmore").css('display','none');
                },
                error : function() {
                    // view("异常！");
                    //window.wxc.xcConfirm('add fail', window.wxc.xcConfirm.typeEnum.error);
                }
            });
        }

        //按条件搜索
        $("#btnprice").click(function () {
            loadpropertybycityOrtypeOrprice();
        })

        //点击加载更多
        $("#loadmore").click(function () {
            loadproperty();
        })
        function loadproperty() {
            //发送房产请求
            var property_id=$('.propertysinfo .propertyinfo').last().attr('property_id')==undefined?'0':$('.propertysinfo .propertyinfo').last().attr('property_id');
            var city_id = $('.selectcityparents').attr('data-value');
            var low=$("#low").val().trim()==""?'-1':$("#low").val().trim();
            var high=$("#high").val().trim()==""?'-1':$("#high").val().trim();
            var type=$('.selectpropertyparents').attr('data-value');
            $.ajax( {
                url: 'class/property/search_property.php',
                data:{
                    method:'more',
                    property_id : property_id,
                    city_id : city_id,
                    low : low,
                    high : high,
                    type : type
                },
                type:'get',
                success:function(data) {

                    $(".spinner").css('display','none');
                    $("#loadmore").css('display','inline-block');

                    var html="";
                    var jsonObj=eval("("+data+")");
                    if(jsonObj.length==0){
                        alert('无更多数据');
                        return;
                    }

                    for(var i=0;i<jsonObj.length;i++){
//                        console.log(jsonObj[i]);
                        html+=' <div class="propertyinfo" property_id="'+jsonObj[i]['property_id']+'">'+
                            '<img src="'+jsonObj[i]['property_img']+'" style="width: 100%;height: 90%;background-size: 100% 100%;">'+
                            '<div style="float: left;">'+
                            '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                            jsonObj[i]['property_name']+
                            '</span>'+
                            '</div>'+

                            '<div style="float: right;">'+
                            '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                            jsonObj[i]['property_rmb']+
                            '</span>'+
                            '</div>'+
                            '<div style="clear:both;">'+

                            '</div>'+
                            '<div>'+
                            '<span style="display:block;font-size: 11px;color: #9297A3;">'+
                            jsonObj[i]['agent']+
                            '</span>'+
                            '</div>'+
                            '</div>';
                    }
//                    console.log(html);
                    $(".propertysinfo").append(html);
//
                },
                beforeSend: function(){
                    $(".spinner").css('display','block');
                    $("#loadmore").css('display','none');
                },
                error : function() {

                }
            });

        }
        
    });


    
    function showcity() {
        $(".selectcitychild").fadeIn("slow");
    }
    function hidecity() {
        $(".selectcitychild").fadeOut("slow");
    }

    function showprice() {
        $(".pricechild").fadeIn("slow");
    }
    function hideprice() {
        $(".pricechild").fadeOut("slow");
    }

    function showproperty() {
        $(".selectpropertychild").fadeIn("slow");
    }
    function hideproperty() {
        $(".selectpropertychild").fadeOut("slow");
    }

</script>